<template>
  <div class="latlng-container" :style="index % 2 === 0 ? 'background-color:#fff;' : 'background-color:#e9e9e9;'">
    <span v-if="type === 'polyline' || type === 'polygon'" style="font-size: 12px;">{{index + 1}}.</span>
    <span v-if="type === 'marker' || type === 'circlemarker'" style="font-size: 12px;">坐标</span>
    <span v-if="type === 'rectangle'" style="font-size: 12px;">{{index === 0 ? '左下' : '右上'}}</span>
    <span v-if="type === 'circle'" style="font-size: 12px;">圆心</span>
    <input type="text" class="latlng-degree" v-model="valueSet.d1"/>
    <sup>°</sup>
    <input type="text" class="latlng-minute" v-model="valueSet.m1"/>
    <sup>'</sup>
    <input type="text" class="latlng-second" v-model="valueSet.s1"/>
    <sup>"</sup>
    <div class="latlng-mark">N</div>
    <input type="text" class="latlng-degree" v-model="valueSet.d2"/>
    <sup>°</sup>
    <input type="text" class="latlng-minute" v-model="valueSet.m2"/>
    <sup>'</sup>
    <input type="text" class="latlng-second" v-model="valueSet.s2"/>
    <sup>"</sup>
    <div class="latlng-mark">E</div>
    <i v-if="showDelete" class="el-icon-delete" @click="deleteRow"/>
  </div>
</template>

<script>
  // import {stringToLatlng, latlngToString} from "../../utils/latlngUtil";

  export default {
    name: 'LatLng',
    props: ['dms', 'type', 'index', 'count'],
    data () {
      return {
        valueSet: {
          d1: '',
          m1: '',
          s1: '',
          d2: '',
          m2: '',
          s2: ''
        },
        showDelete: false
      }
    },
    created () {
      this.showDelete = (this.type === 'polyline' && this.count > 2) || (this.type === 'polygon' && this.count > 3);
    },
    mounted () {
      if (this.dms) {
        this.changeData();
      }
    },
    methods: {
      deleteRow() {
        this.$emit('onLatLngDelete', this.index);
      },
      changeData () {
        let ary = this.dms.split(',');
        this.valueSet.d1 = ary[0];
        this.valueSet.m1 = ary[1];
        this.valueSet.s1 = ary[2];
        this.valueSet.d2 = ary[3];
        this.valueSet.m2 = ary[4];
        this.valueSet.s2 = ary[5];
        // console.log('change data::::', this.valueArray);
        // let latlng = latlngToString(this.latlng);
        // this.lat.degree = latlng.lat.degree;
        // this.lat.minute = latlng.lat.minute;
        // this.lat.second = latlng.lat.second;
        // this.lng.degree = latlng.lng.degree;
        // this.lng.minute = latlng.lng.minute;
        // this.lng.second = latlng.lng.second;
      },
      callback () {
        let str = [this.valueSet.d1, this.valueSet.m1, this.valueSet.s1, this.valueSet.d2, this.valueSet.m2, this.valueSet.s2].join(',');
        this.$emit('onLocationChange', {dms: str, index: this.index || 0});
        // console.log('latlng changed.....', this.lat, this.lng, isNaN(''));
        // let result = {latlng: {lat: null, lng: null}, index: this.index || 0};
        //
        // if (isNaN(parseInt(this.lat.degree)) || isNaN(parseInt(this.lat.minute)) || isNaN(parseInt(this.lat.second))
        //   || isNaN(parseInt(this.lng.degree)) || isNaN(parseInt(this.lng.minute)) || isNaN(parseInt(this.lng.second))) {
        //   return this.doCallback(result);
        // }
        // let d = Number(this.lat.degree);
        // let m = Number(this.lat.minute);
        // let s = Number(this.lat.second);
        // if (d < 0 || d > 90 || d != parseInt(d, 10)) {
        //   return this.doCallback(result);
        // } else if (m < 0 || m > 59 || m != parseInt(m, 10)) {
        //   return this.doCallback(result);
        // } else if (s < 0 || s > 60) {
        //   return this.doCallback(result);
        // }
        // let latStr = `${d}°${m}'${s}"`;
        //
        // d = Number(this.lng.degree);
        // m = Number(this.lng.minute);
        // s = Number(this.lng.second);
        // if (d < 0 || d > 180 || d != parseInt(d, 10)) {
        //   return this.doCallback(result);
        // } else if (m < 0 || m > 59 || m != parseInt(m, 10)) {
        //   return this.doCallback(result);
        // } else if (s < 0 || s > 60) {
        //   return this.doCallback(result);
        // }
        //
        // let lngStr = `${d}°${m}'${s}"`;
        // let latlng = stringToLatlng(latStr, lngStr);
        // this.doCallback(latlng);

      },
      doCallback (latlng) {
        // console.log('do callback::::', latlng);
        this.$emit('onLocationChange', {latlng, index: this.index || 0});
      }
    },
    // computed: {
    //   showDelete: function() {
    //     return (this.type === 'polyline' && this.count > 2) || (this.type === 'polygon' && this.count > 3);
    //   }
    // },
    watch: {
      count: {
        deep: true,
        handler (newValue, oldValue) {
          this.showDelete = (this.type === 'polyline' && newValue > 2) || (this.type === 'polygon' && newValue > 3);
        }
      },
      dms: {
        deep: true,
        handler (newValue, oldValue) {
          console.log('new value:', newValue, oldValue);
          if (newValue != oldValue) {
              this.changeData()
          }
        }
      },
      valueSet: {
        deep: true,
        handler (newValue, oldValue) {
          // let latStr = `${newValue.degree}°${newValue.minute}'${newValue.second}"`;
          // let lngStr = `${this.lng.degree}°${this.lng.minute}'${this.lng.second}"`;
          // let latlng = stringToLatlng(latStr, lngStr);
          // this.callback(latlng);
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.callback();
          }, 100);

        }
      }
    }
  }
</script>

<style scoped lang="scss">
.latlng-container {
  display: flex;
  flex-direction: row;
  height:29px;
  line-height:23px;
  padding: 5px 10px 0 10px;

  input {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    margin-left: 2px;
    margin-right:2px;
  }

  .latlng-degree {
    width: 23px;
  }

  .latlng-minute {
    width:16px;
  }

  .latlng-second {
    width: 28px;
  }

  .latlng-mark {
    height:23px;
    line-height:23px;
    display:block;
    background-color:#0062cd;
    color:#fff;
    padding: 0 3px;
    font-size: 12px;
    font-weight:bold;
  }

  i {
    cursor: pointer;
    margin-left:10px;
    line-height: 25px;
  }
}

</style>
